<template>
  <div class="comment-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-button circle size="small" @click="goBack" class="back-btn">
            <ArrowLeft />
          </el-button>
          <span class="header-title">评论区</span>
        </div>
      </template>

      <!-- 固定输入区域 -->
      <div class="fixed-input">
        <el-input v-model="newComment" type="textarea" :rows="3" placeholder="请输入评论内容" class="input" />
        <div class="btn-row">
          <el-button type="primary" @click="submitComment" :disabled="!canSubmit">
            发表评论
          </el-button>
        </div>
      </div>

      <!-- 滚动评论区域 -->
      <div class="scrollable-comments">
        <el-divider>最新评论</el-divider>
        <div class="comment-list">
          <CommentItem v-for="comment in mainComments" :key="comment.id ?? -1" :comment="comment"
            :replies="comments.filter(c => c.parentId === comment.id)" :all-comments="comments" @reply="handleReply" />

        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import CommentItem from '@/views/common/CommentItem.vue'
import type { Comment } from '@/interface/commonData'
import usecommentPage from '@/hooks/comment/usecommentPage'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore();


const {
  comments,
  workId,
  mainComments,
  childComments,
  submitComment,
  newComment,
  canSubmit,
  handleReply,
} = usecommentPage();



// 返回上一页
const goBack = () => {
  window.history.back()
}



</script>

<style scoped>
.comment-container {
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.fixed-input {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 12px;
}

.scrollable-comments {
  height: 500px;
  overflow-y: auto;
  flex-grow: 1;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
}

.header-title {
  user-select: none;
  margin-left: 12px;
}

.back-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input {
  margin-bottom: 8px;
}

.btn-row {
  text-align: right;
}

.comment-list {
  margin-top: 8px;
}
</style>
